<template>
  <div id="index" class="bg">
    <header>
      <div class="headerWarp" >
      <div class="menu">
          <img @click="isShowMenu=!isShowMenu" class="icon_menu" src="../assets/images/icon-Home.png" alt="">
          <transition name="fade">
          <div class="nenuWarp" v-if="isShowMenu">
            <div class="pic">
              <img src="../assets/images/logo.png" alt="">
            </div>
            <ul>
              <li v-for="(item,index) in menuArr" :key="index">
                <div @click="pageChange(item.path)">
                  <h4 :class="{activePath:item.path==$route.path}">{{item.name}}</h4>
                  <i v-show="item.path==$route.path" class="el-icon-caret-top"></i>
                </div>
              </li>
            </ul>
          </div>
          </transition>
      </div>
      <div class="lang_sign">
        <div class="sign">
          <el-dropdown @command="handleCommand" trigger="click">
            <span>
              <img class="lang_icon" src="../assets/images/icon-language.png" alt="">
              <span class="header_text">{{$t('menu.lang')}}</span>
              
              </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="zh">中文</el-dropdown-item>
              <el-dropdown-item command="en">English</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="sign"  @click="dialogFormVisible = true">
          <img class="sign_icon" src="../assets/images/icon-sign.png" alt="">
          <span class="header_text">{{$t('menu.sign')}}</span>
        </div>
      </div>
      </div>
    </header>
    <div id="signIn" class="signIn">
       <el-dialog :modal-append-to-body='false' top='20vh'   custom-class='dialogClass' title="SIGN IN" :visible.sync="dialogFormVisible" width="40%" :show-close='false' :close-on-click-modal='false'
  center>
            <el-form :model="form" >
                <el-row>
                  <span class="inputLabel">User Name</span>
                    <el-col :span="24" style="height:50px">
                        <el-form-item >
                            <el-input size='mini'  v-model="form.name" autocomplete="off" placeholder="Your Name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="height:50px">
                      <span class="inputLabel">Password</span>
                        <el-form-item >
                            <el-input size='mini' type="password"  v-model="form.password" autocomplete="off" placeholder="Your Password"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <span class="inputLabel creatAccount" @click="toCreate">Create An Account？</span>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="dialogFormVisible = false">Login</el-button>
                <div class="forget">  
                  <span @click="toResertPass">Forgot Your Password?</span>
                  <br/>
                  <span @click="toResertPass">Forgot Your UserName?</span>
                </div>
              
            </div>
        </el-dialog>
        <!-- 创建账户： -->
         <el-dialog :modal-append-to-body='false' top='20vh'   custom-class='dialogClass' title="LET'S  MAKE  IT OFFICIAL  CREATE  YOUR  ACCOUNT" :visible.sync="dialogCreatAccount" width="50%" :show-close='false' :close-on-click-modal='false'
  center>
              <el-form :model="createForm"  label-width="130px">
                <el-row>
                    <el-col :span="24" style="height:50px">
                        <el-form-item label='First Name'>
                            <el-input size='mini'  v-model="createForm.name" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="24" style="height:50px">
                        <el-form-item label='Last Name'>
                            <el-input size='mini' type="text"  v-model="createForm.password" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" style="height:50px">
                        <el-form-item label='password'>
                            <el-input size='mini' type="password"  v-model="createForm.password" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="24" style="height:50px">
                        <el-form-item label='Confirm Password'>
                            <el-input size='mini' type="password"  v-model="createForm.password" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="CreatAccount">Create Account</el-button>
                <div class="forget">  
                  <span  @click="backToSign">Already Have An Account?</span>
                </div>
            </div>
        </el-dialog>
        <!-- 重置密码： -->
        <el-dialog :modal-append-to-body='false' top='20vh'   custom-class='dialogClass' title="PASSWORD RESET" :visible.sync="dialogReset" width="40%" :show-close='false' :close-on-click-modal='false'
  center>
              <el-form :model="resertForm"  label-width="130px">
                <p class="resertTips">Please Enter The Email Address For Your Account.Veriflcation Code Will Be Sent To You.Once You Have Received The Veriflcation Code,You will Be Able To Choose A New Password For Your Account.</p>
                <el-row>
                    <el-col :span="24" style="height:50px">
                        <el-form-item label='Email Address*'>
                            <el-input size='mini'  v-model="resertForm.name" autocomplete="off" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="success" @click="dialogReset=false">Submit</el-button>
            </div>
        </el-dialog>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "home",
  data() {
    return {
      visible: false,
      isHomePage: "isHomePage",
      menuArr: [
        {
          path: "/home",
          name: this.$t("menu.Home")
        },
        {
          path: "/about",
          name: this.$t("menu.About")
        },
        {
          path: "",
          name: "Careers"
        },
        {
          path: "/visitor",
          name: "Visitor Registration"
        },
        {
          path: "/supplier",
          name: "Supplier Management"
        },
        {
          path: "/contact",
          name: "Contact Us"
        },
        {
          path: "/event",
          name: "Event"
        }
      ],
      //sign in dialog:
      dialogFormVisible: false,
      form: {},
      dialogCreatAccount: false,
      createForm: {},
      resertForm: {},
      dialogReset: false,
      //menu
      isShowMenu: false
    };
  },
  watch: {
    $route(a, b) {
      if (this.$route.path == "/home" || this.$route.path == "/visitor") {
        // $("#index").css({
        //   backgroundImage: 'url("../assets/images/background_home.png")',
        // });
        $("#index").addClass("bg");
        $(".headerWarp").removeClass("header_border");
        $(".header_text").removeClass("color");
      } else {
        $("#index").removeClass("bg");
        $(".headerWarp").addClass("header_border");
        $(" .header_text").addClass("color");
      }
    }
  },
  methods: {
    pageChange(path) {
      this.$router.push(path);
      this.isShowMenu = false;
    },
    handleCommand(command) {
      // let a=command=='zh'?'中文':'English';
      this.$message("success");
      this.$i18n.locale = command;
      this.menuArr = [
        {
          path: "/home",
          name: this.$t("menu.Home")
        },
        {
          path: "/about",
          name: this.$t("menu.About")
        },
        {
          path: "",
          name: "Careers"
        },
        {
          path: "/visitor",
          name: "Visitor Registration"
        },
        {
          path: "/supplier",
          name: "Supplier Management"
        },
        {
          path: "/contact",
          name: "Contact Us"
        },
        {
          path: "/event",
          name: "Event"
        }
      ];
    },
    //sign:
    toCreate() {
      this.dialogFormVisible = false;
      this.dialogCreatAccount = true;
    },
    CreatAccount() {
      this.dialogCreatAccount = false;
    },
    backToSign() {
      this.dialogFormVisible = true;
      this.dialogCreatAccount = false;
    },
    toResertPass() {
      this.dialogFormVisible = false;
      this.dialogReset = true;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less' scoped>
#index {
  width: 100%;
  height: 100%;

  .main {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 100px;
  }
}
.headerWarp  .lang_sign .sign  span.color {
  color: rgb(88, 180, 72);
}
div.bg {
  background-image: url("../assets/images/background_home.png");
  background-size: cover;
}
.header_border {
  border-bottom: 2px solid rgba(115, 115, 115, 0.7);
}
.headerWarp {
  height: 100px;
  width: 90%;
  position: fixed;
  left: 5%;
  top: 0;
  padding: 19px 0;
  z-index: 1000;
  color: #fff;

  .menu {
    float: left;
    margin-left: 70px;
    cursor: pointer;
    position: relative;
    padding-top: 5px;
    .nenuWarp {
      position: absolute;
      left: -100%;
      top: 100%;
      background-image: url("../assets/images/menu.png");
      background-size: 100%;
      z-index: 1001;
      width: 350px;
      height: 550px;
      padding: 30px 10px;
      color: rgba(255, 255, 255, 0.6);

      ul {
        li:hover {
          color: rgba(255, 255, 255, 0.9);
        }
      }
    }
    .icon_menu {
      width: 60px;
    }

    .pic {
      height: 40%;
      border-bottom: 1px solid rgba(255, 255, 255, 0.6);
      width: 80%;
      margin: auto;
      text-align: center;
      padding: 20px 10px 30px;
      img {
        height: 100%;
      }
    }
    ul {
      height: 65%;
      padding-top: 6%;
      li {
        text-align: center;
        height: 14%;
        cursor: pointer;
        div {
          display: inline-block;
          height: 100%;
          border-bottom: 1px solid rgba(255, 255, 255, 0.6);
          padding-top: 3%;
          i {
            color: rgba(255, 255, 255, 1);
          }
          h4 {
            font-size: 16px;
          }
          h4.activePath {
            color: rgba(255, 255, 255, 1);
          }
        }
      }
    }
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: all 0.5s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }

  .lang_sign {
    float: right;
    width: 30%;
    cursor: pointer;
    padding-top: 10px;
    .sign {
      width: 48%;
      display: inline-block;
      overflow: hidden;

      .lang_icon {
        position: relative;
        top: 8px;
        left: 0;
      }
      .sign_icon {
        height: 28px;
        position: relative;
        top: 8px;
        left: 0;
      }

      span {
        color: #fff;
        line-height: 30px;
      }
    }
  }
}
.el-dropdown-menu {
  border: none;
}
.el-popper[x-placement^="bottom"] {
  background-color: rgb(88, 180, 72);
}
.el-dropdown-menu__item {
  color: #fff;
}
// sign in:
.inputLabel {
  color: rgb(88, 180, 72);
}
.creatAccount {
  float: right;
  cursor: pointer;
}
.forget {
  text-align: center;
  span {
    display: inline-block;
    color: rgb(88, 180, 72);
    border-bottom: 1px solid rgb(88, 180, 72);
    margin-top: 10px;
    cursor: pointer;
  }
}
.resertTips {
  line-height: 24px;
  color: rgba(115, 115, 115, 1);
}
</style>
